<template>
	<view class="register">
		<view class="avator-box"><image class="avator" src="../../../static/image/icons/leju-logo.png"></image></view>
		<view class="res-con">
			<form @submit="formSubmit"   @reset="formReset">
				<view class="username ipt">
					<input type="text" name="tel" placeholder="手机号" />
				</view>
				<view class="password ipt" v-if="showPasswordFlag">
					<input type="password" name="password" v-model="pwd" placeholder="登录密码" />
					<image src="../../../static/image/icons/no-watch.png" @tap="seePassword" mode=""></image>
				</view>
				<view class="password ipt" v-else>
					<input type="text" name="password" v-model="pwd" placeholder="登录密码" />
					<image src="../../../static/image/icons/view.png" @tap="seePassword" mode=""></image>
				</view>
				<view class="username ipt">
					<input type="text" name="username" value="麦小埋" placeholder="用户名" />
				</view>
				<view class="username ipt">
					<input type="text" name="nickname" value="小埋酱" placeholder="昵称" />
				</view>
				
				<view class="num ipt">
					<input type="text"  value="2111" placeholder="验证码" />
					<view class="code" @tap="changeCodeFlag">
						<text v-if="!codeFlag">获取验证码</text>
						<text v-else>{{sec}}s</text>
					</view>
				</view>
				<view class="btns">
					<button form-type="submit" class="btn" :class="{ active: !loaddingFlag }">
						<text v-if="loaddingFlag">注册</text>
						<view class="quan" v-else>
							<view class="dang">
								
							</view>
						</view>
					</button>
				</view>
			</form>
			<view class="agreement">
				<view class="cirl" @tap="agree">
					<view class="dian" v-if="agreementFlag">
						
					</view>
				</view>
				<text>同意</text>
				<text class="xy">《协议》</text>
			</view>
			</view>
	</view>
</template>

<script>
	import { register } from '../../../utils/mine/register/index.js';
	export default {
		data() {
			return {
				agreementFlag: false,
				codeFlag: false,
				sec: 59,
				showPasswordFlag: true,
				pwd: '123456',
				loaddingFlag: true
			};
		},
		methods: {
			agree () {
				this.agreementFlag = !this.agreementFlag;
			},
			changeCodeFlag () {
				this.codeFlag  = true;
				if (this.codeFlag) {
				let timer = setInterval(() => {
						// console.log('1')
						this.sec--;
						if (this.sec == 0) {
							clearInterval(timer);
						}
					}, 1000)
				}
			},
		async	formSubmit (e) {
				this.loaddingFlag = false;
				console.log(e);
				// register()
				let obj = Object.assign({}, e.detail.value);
				obj.avatar = 'https://bufan-cloud.oss-cn-beijing.aliyuncs.com/leju_test/20191212151304.jpg';
				console.log(obj);
				let data = await register(obj);
				// console.log(data);
				if (data.data.code == 'S') {
					uni.navigateTo({
						url: '../login/login'
					});
					this.loaddingFlag = true;
				} else {
					uni.showToast({
						icon: 'none',
						title: `${data.data.msg}`
					})
					this.loaddingFlag = true;
				}
			},
			seePassword () {
				this.showPasswordFlag = !this.showPasswordFlag;
			}
		}
	}
</script>

<style lang="scss">
	@keyframes mymove {
		0% {
			transform: rotate(0deg);
		},
		100% {
			transform: rotate(720deg);
		}
	}
.register {
	width: 100%;
	min-height: 100vh;
	max-height: 100%;
	background-color: #f1ece7;
	.avator-box {
		padding: 154rpx 268rpx 110rpx 270rpx;
		.avator {
			width: 212rpx;
			height: 212rpx;
			border-radius: 50%;
		}
	}
	.res-con {
		width: 100%;
		box-sizing: border-box;
		padding: 0 80rpx;
		.num {
			position: relative;
			.code {
				position: absolute;
				top: 35rpx;
				right: 30rpx;
				font-size: 26rpx;
				box-sizing: border-box;
				padding-left: 50rpx;
				color: #9F9F9F;
			}
		}
		.password {
			position: relative;
			image {
				position: absolute;
				width: 30rpx;
				height: 20rpx;
				top: 40rpx;
				right: 30rpx;
			}
		}
		.ipt{
			width: 100%;
			height: 100rpx;
			border-radius: 80rpx;
			box-shadow: 0 0 30rpx 0 rgba(43,86,112,.1);
			margin-bottom: 36rpx;
			input {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding-left: 50rpx;
				font-size: 28rpx;
				// color: #9F9F9F;
				letter-spacing: 1.71rpx;
			}
		}
		.btns {
			margin: 68rpx 0 22rpx 0;
			.btn {
				background: #354E44;
				font-size: 30rpx;
				width: 100%;
				height: 94rpx;
				border-radius: 80rpx;
				color: #FFFFFF;
				letter-spacing: 2.14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bolder;
				transition: all .5s;
				&.active {
					width: 94rpx;
					border-radius: 50%;
				}
				.quan {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					border: 2px solid #fff;
					animation: mymove 3s infinite linear; 
					.dang {
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							background: #354E44;
							margin: 0 15rpx 0 0;
					}
				}
			}
		}
		.agreement {
				width: fit-content;
				margin: 0 auto;
				display: flex;
				align-items: center;
				.cirl {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					border: 1px solid #000;
					display: flex;
					align-items: center;
					justify-content: center;
					// margin-right: 5rpx;
					.dian {
						width: 6rpx;
						height: 6rpx;
						border-radius: 50%;
						background-color: #000;
					}
				}
				text {
					font-size: 18rpx;
				}
				.xy {
					font-size: 28rpx;
				}
		}
		}
}
</style>
